<template>
  <div>
    <div class="mianbao container">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item v-for="item,index in navName" :key="item.id"><span @click="onTag(item.id,index,item.name)">{{item.name}}</span></el-breadcrumb-item>     
        </el-breadcrumb>
      </div>
    <div  v-if="!list.mainPictures" class="container">
      <div class="loading"></div>
    </div>
    <div class="container" v-if="list.mainPictures">
      <div class="part">
        <div class="media">
          <!--        <PartImage :images="list.mainPictures"></PartImage>-->
          <PartImage :images="list.mainPictures"></PartImage>
          <PartSales :goods="list"/>
        </div>
        <div class="spec">
          <PartInfo  :goods="list"/>
          <PartDeploy :list="list" @change="xuan" ></PartDeploy>
          <div class="shuZhi">
            <dl>
              <dt>数量</dt>
              <dd> <el-input-number v-model="num"  :min="1" :max="99"></el-input-number></dd>
            </dl>
          </div>
          <el-button style="margin-top: 20px;margin-left: 10px;background: #27ba9b;color:#fff;width: 180px;height: 50px;" @click="jia">加入购物车</el-button>
        </div>
      </div>
      <PartRlevant :listes="list"></PartRlevant>
      <PartFooter :goods="list"></PartFooter>
    </div>
  </div>
</template>

<script>
import PartImage from "@/views/particulars/components/Partimage";
import PartSales from "@/views/particulars/components/PartSales";
import PartInfo from "@/views/particulars/components/PartInfo";
import PartDeploy from "@/views/particulars/components/PartDeploy";
import PartRlevant from "@/views/particulars/components/PartRlevant";
import PartFooter from "@/views/particulars/components/PartFooter";

export default {
  name: "ParticularsView",
  components: {
    PartImage,
    PartSales,
    PartInfo,
    PartDeploy,
    PartRlevant,
    PartFooter,
  },
  data(){
    return{
      list:{},
      num:0,
      count:{},
      goodsId:"4000031",
      obj:{},
      navName: []
    }
  },
  async created(){
    console.log()
    this.goodsId = this.$route.params.id
    const res = await this.$http.getParti({id:this.goodsId});
    this.list = res.data.result
    this.skuId = res.data.result.skus[0].id
    this.navName = [this.list.categories[1],this.list.categories[0],{name:this.list.name,id:this.list.id}]
    console.log(this.navName);
    console.log(res)
  },
  watch: {
    async $route(to){
      this.list = {}
      this.obj = {},
      this.goodsId = to.params.id
      const res = await this.$http.getParti({id:this.goodsId});
      this.list = res.data.result
      this.skuId = res.data.result.skus[0].id
      window.scrollTop =0
    },
  },
  methods:{
    onTag(id,index,name) {
      console.log(1);
      if(index===0) {
        this.$router.push({
          path: '/about1',
          query: {
            id,
            name,
          },
        })
      }else if(index === 1) {
        this.$router.push({
          path: '/about2',
          query: {
            id,
          },
        })
      }else {
        return;
      }
      
    },
    async jia(){
      let obj = {
        skuId:this.skuId,
        count:this.num
      }
      console.log(obj)
      let res = await this.$http.postCart(obj)
      
      this.$router.push("/cart")
      console.log(res,obj)
    },
    xuan(obj){
      this.obj = obj
      if (obj.skuId) {
        for (const key in obj) {
          this.list[key] = obj[key]
        }
        this.list.stock = obj.inventory
      } else {
        // 用户取消了规格
        this.count = 1
        this.obj.skuId = null
        this.obj.count = 1
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .loading {
    height: 600px;
    border-top: 72px solid #f5f5f5;
    background: #fff url(../../assets/load.gif) no-repeat center / 80px 80px;
  }
  .mianbao {
    padding: 25px 10px;
  }
  .container{
    width: 1240px;
    margin: 0 auto;
    position: relative;
    .part{
      margin: 0 auto;
      position: relative;
      display: flex;
      background: #fff;
      padding: 40px;
      .media {
        width: 480px;
        margin-right: 40px;
      }
      .spec{
        .shuZhi {
          padding-left: 10px;
          padding-top: 20px;
          dl {
            display: flex;
            padding-bottom: 10px;
            align-items: center;
            dt {
              width: 50px;
              color: #999;
            }
            dd {
              flex: 1;
              color: #666;
              line-height: 40px;
            }
          }
        }
      }
    }
  }

</style>